<template>
  <div class="ma-content-block justify-between p-4">
    <a-tabs
      type="rounded"
      v-model:active-key="active"
      @delete="openDeleteModal"
      @change="handleChange"
      :updateable="true"
      auto-switch
      :editable="true"
    >
      <template #extra>
        <a-space>
          <a-tooltip content="添加组">
            <a-button shape="round" @click="addGroupModal" type="primary" v-auth="['/core/config/save']">
              <template #icon><icon-plus /></template>
            </a-button>
          </a-tooltip>

          <a-tooltip content="管理该组配置">
            <a-button shape="round" @click="manageConfigModal" type="primary" v-auth="['/core/config/index']">
              <template #icon><icon-settings /></template>
            </a-button>
          </a-tooltip>
        </a-space>
      </template>
      <a-tab-pane v-for="(item, index) in configGroupData" :key="`${index}-${item.id}`" :title="item.name">
        <ma-form
          v-model="formArray[item.id]"
          :columns="optionsArray[item.id]"
          @submit="submit"
          class="mt-3"
          ref="maFormRef"
        />
      </a-tab-pane>
    </a-tabs>

    <a-modal v-model:visible="deleteVisible" type="warning" :on-before-ok="deleteConfigGroup">
      <template #title>危险操作</template>
      <div class="mb-2">
        确定要删除
        <span class="text-red-500 underline font-black">{{ deleteGroupData.name }}</span>
        配置组吗？
      </div>
      <div>
        此操作会删除组和所属组配置项，如果执行请在下面输入框输入：<span class="text-red-500">{{
          deleteGroupData.name
        }}</span>
      </div>
      <a-input :placeholder="`请输入 ${deleteGroupData.name}`" class="mt-2" v-model="name" />
    </a-modal>

    <add-group ref="addGroupRef" @success="addGroupSuccess" />

    <manage-config ref="manageConfigRef" @close="reloadPage" />
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue"
import config from "@/api/setting/config"
import { Message } from "@arco-design/web-vue"
import { auth } from "@/utils/common"
import AddGroup from "./components/addGroup.vue"
import AddConfig from "./components/addConfig.vue"
import ManageConfig from "./components/manageConfig.vue"

const isCreateNode = ref(false)
const active = ref("0-1")
const name = ref("")
const deleteGroupData = ref({ name: "" })
const maFormRef = ref()
const manageConfigRef = ref()
const addGroupRef = ref()
const formArray = ref([])
const optionsArray = ref([])
const configGroupData = ref([])
const deleteVisible = ref(false)

const openDeleteModal = (data) => {
  if (!auth("/core/config/destroy")) {
    Message.info("没有权限删除配置")
    return
  }
  const id = data.split("-")[1]
  if (id == 1 || id == 2) {
    Message.info("该配置为系统核心配置，无法删除")
    return
  }
  deleteGroupData.value = configGroupData.value.find((item) => item.id == id)
  deleteVisible.value = true
}

const handleChange = (key) => {
  const params = key.split("-")
  maFormRef.value[params[0]].init()
  active.value = key
}

const reloadPage = () => {
  getConfigGroupList()
  active.value = "0-1"
}

const getConfigGroupList = async () => {
  isCreateNode.value = false
  const response = await config.getConfigGroupList()
  configGroupData.value = response.data
  configGroupData.value.map(async (item) => {
    formArray.value[item.id] = {}
    optionsArray.value[item.id] = []
    await getConfigData(item.id)
  })
  isCreateNode.value = true
}

const getConfigData = async (id) => {
  const params = {
    group_id: id,
    orderBy: "sort",
    orderType: "desc"
  }
  const response = await config.getConfigList(params)
  const form = {}
  optionsArray.value[id] = response.data.map((item) => {
    let option = {
      title: item.name,
      dataIndex: item.key,
      formType: item.input_type,
      dict: {},
      labelWidth: "120px",
      extra: item.remark,
      tooltip: item.key
    }
    if (item.key === "upload_mode") {
      option = {
        title: item.name,
        dataIndex: item.key,
        formType: item.input_type,
        dict: {},
        labelWidth: "120px",
        extra: item.remark,
        tooltip: item.key,
        onControl: (val) => {
          if (val == 1) {
            return {
              local_root: { display: true },
              local_domain: { display: true },
              local_uri: { display: true },
              oss_accessKeyId: { display: false },
              oss_accessKeySecret: { display: false },
              oss_bucket: { display: false },
              oss_dirname: { display: false },
              oss_domain: { display: false },
              oss_endpoint: { display: false },
              qiniu_accessKey: { display: false },
              qiniu_secretKey: { display: false },
              qiniu_bucket: { display: false },
              qiniu_dirname: { display: false },
              qiniu_domain: { display: false },
              cos_secretId: { display: false },
              cos_secretKey: { display: false },
              cos_bucket: { display: false },
              cos_dirname: { display: false },
              cos_domain: { display: false },
              cos_region: { display: false }
            }
          }
          if (val == 2) {
            return {
              local_root: { display: false },
              local_domain: { display: false },
              local_uri: { display: false },
              oss_accessKeyId: { display: true },
              oss_accessKeySecret: { display: true },
              oss_bucket: { display: true },
              oss_dirname: { display: true },
              oss_domain: { display: true },
              oss_endpoint: { display: true },
              qiniu_accessKey: { display: false },
              qiniu_secretKey: { display: false },
              qiniu_bucket: { display: false },
              qiniu_dirname: { display: false },
              qiniu_domain: { display: false },
              cos_secretId: { display: false },
              cos_secretKey: { display: false },
              cos_bucket: { display: false },
              cos_dirname: { display: false },
              cos_domain: { display: false },
              cos_region: { display: false }
            }
          }
          if (val == 3) {
            return {
              local_root: { display: false },
              local_domain: { display: false },
              local_uri: { display: false },
              oss_accessKeyId: { display: false },
              oss_accessKeySecret: { display: false },
              oss_bucket: { display: false },
              oss_dirname: { display: false },
              oss_domain: { display: false },
              oss_endpoint: { display: false },
              qiniu_accessKey: { display: true },
              qiniu_secretKey: { display: true },
              qiniu_bucket: { display: true },
              qiniu_dirname: { display: true },
              qiniu_domain: { display: true },
              cos_secretId: { display: false },
              cos_secretKey: { display: false },
              cos_bucket: { display: false },
              cos_dirname: { display: false },
              cos_domain: { display: false },
              cos_region: { display: false }
            }
          }
          if (val == 4) {
            return {
              local_root: { display: false },
              local_domain: { display: false },
              local_uri: { display: false },
              oss_accessKeyId: { display: false },
              oss_accessKeySecret: { display: false },
              oss_bucket: { display: false },
              oss_dirname: { display: false },
              oss_domain: { display: false },
              oss_endpoint: { display: false },
              qiniu_accessKey: { display: false },
              qiniu_secretKey: { display: false },
              qiniu_bucket: { display: false },
              qiniu_dirname: { display: false },
              qiniu_domain: { display: false },
              cos_secretId: { display: true },
              cos_secretKey: { display: true },
              cos_bucket: { display: true },
              cos_dirname: { display: true },
              cos_domain: { display: true },
              cos_region: { display: true }
            }
          }
        }
      }
    }
    const allowDictType = ["select", "radio", "checkbox"]
    if (allowDictType.includes(item.input_type)) {
      option.dict = { data: item.config_select_data }
    }
    if (item.input_type === "switch") {
      switch (typeof item.value) {
        case "string":
          option.checkedValue = "true"
          option.uncheckedValue = "false"
          break
        case "number":
          option.checkedValue = 1
          option.uncheckedValue = 0
          break
      }
    }
    if (item.input_type === "key-value") {
      item.value = JSON.parse(item.value)
    }
    if (/^\[/.test(item.value) && /\]$/.test(item.value) && item.input_type === "checkbox") {
      item.value = JSON.parse(item.value)
    } else if (item.value && item.value.toString().indexOf(",") > -1 && item.input_type === "checkbox") {
      item.value = item.value.split(",")
    }
    form[item.key] = item.value
    return option
  })
  formArray.value[id] = form
}

const manageConfigModal = () => {
  manageConfigRef.value.open(active.value.split("-")[1])
}

const addGroupModal = () => addGroupRef.value.open()
const addGroupSuccess = (result) => {
  if (result) {
    Message.success("配置组保存成功")
    getConfigGroupList()
    return
  }
  Message.success("配置组保存失败")
}

const deleteConfigGroup = async (done) => {
  if (name.value !== deleteGroupData.value.name) {
    Message.error(`输入错误，验证失败`)
    done(false)
    return
  }

  const response = await config.deleteConfigGroup({
    ids: deleteGroupData.value.id
  })
  if (response.code === 200) {
    Message.success("配置删除成功")
    deleteGroupData.value = {}
    getConfigGroupList()
    done(true)
  }
}

const submit = async (data) => {
  if (!auth("/core/config/update")) {
    Message.info("没有权限修改配置")
    return
  }
  const response = await config.updateByKeys(data)
  if (response.code === 200) {
    Message.success(response.message)
  }
}

getConfigGroupList()
nextTick(() => maFormRef.value && maFormRef.value[0].init())
</script>
<script>
export default { name: "setting:config" }
</script>

<style scoped></style>
